<!--_meta 作为公共模版分离出去-->
<#include "include/_meta.html">
<!--/meta 作为公共模版分离出去-->
<script src="vue/vue.min.js"></script>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.1/layer.js"></script>
<title>车辆管理-添加保险记录</title>
<meta name="keywords" content="汽车租赁">
<meta name="description" content="H-ui.admin v2.3，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<article class="page-container">
    <form class="form form-horizontal" id="form-maintain-add">

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车牌号：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value="" placeholder="车牌号" id="carIdCard"
                       name="carIdCard">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>发车里程：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value="" placeholder="发车里程" id="initMile"
                       name="initMile">
            </div>
        </div>


        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>发车油量：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value="" placeholder="发车油量" id="initOil"
                       name="initOil">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>保养地点：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value="" placeholder="保养地点" id="place"
                       name="place">
            </div>
        </div>


        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>保养人员：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <select type="text" class="input-text" id="userName" name="userName">

                    <optgroup label="--请选择保养人--">
                        <option v-for="(item,index) in result">{{item.userName}}</option>

                </select>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>出车时间：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text Wdate"
                       onfocus="WdatePicker({skin:'whyGreen',startDate:'%y-%M-%d %H:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss'})"
                       autocomplete="off" lder="出车时间" id="maintainStart" name="maintainStart">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>还车时间：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text Wdate"
                       onfocus="WdatePicker({skin:'whyGreen',startDate:'%y-%M-%d %H:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss'})"
                       autocomplete="off" lder="还车时间" id="maintainEnd" name="maintainEnd">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>还车里程：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value="" placeholder="还车里程" id="returnMile"
                       name="returnMile">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>还车油量：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value="" placeholder="还车油量" id="returnOil"
                       name="returnOil">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>保养费用：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value="" placeholder="保养费用" id="money"
                       name="money">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">保养内容：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea id="maintainContent" name="maintainContent" cols="" rows="" class="textarea"
                          placeholder="说点什么...100个字符以内" dragonfly="true" onKeyUp="textarealength(this,100)"></textarea>
                <p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>备注：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value="" placeholder="备注" id="remark"
                       name="remark">
            </div>
        </div>


        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>下次保养时间：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text Wdate"
                       onfocus="WdatePicker({skin:'whyGreen',startDate:'%y-%M-%d %H:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss'})"
                       autocomplete="off" placeholder="下次保养时间" id="nextMaintainTime" name="nextMaintainTime">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>下次保养里程：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value="" placeholder="下次保养里程"
                       id="nextMaintainMile"
                       name="nextMaintainMile">
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="button" value="提交"
                       onclick="submitAddMaintain()"/>
            </div>
        </div>

    </form>
</article>

<!--_footer 作为公共模版分离出去-->
<#include "include/_footer.html">
<!--/_footer /作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script>
    var app = new Vue({
        el: '#form-maintain-add',
        data: {
            result: []
        }
    });

    var getUserById = function () {
        $.ajax({
            type: "post",
            dataType: "json",
            url: "/getAllUser",
            success: function (msg) {
                app.result = msg;
            }
        })
    }
    getUserById();

    var closec = function () {
        var thisName = parent.layer.getFrameIndex(window.name);
        parent.layer.close(thisName);
    }

    var submitAddMaintain = function () {
        let mustData = ['carIdCard', 'initMile', 'initOil', 'place', 'maintainStart', 'maintainEnd', 'returnOil', 'returnMile', 'maintainContent', 'money'];
        let mustDataTip = ['车牌号不能为空', '发车里程不能为空', '发车油量不能为空', '保养地点不能为空', '出车时间不能为空', '还车时间不能为空', '还车油量不能为空', '还车里程不能为空', '保养内容不能为空', '保养费用不能为空']
        let canSet = true;
        console.log(this.form);
        for (let i = 0; i < mustData.length; i++) {
            if ($("#" + mustData[i]).val() == '') {
                layer.msg("必填:" + mustDataTip[i], {icon: 5});
                canSet = false;
                break;
            }
        }
        if (canSet) {
            $.ajax({
                type: "POST",
                url: "/addMaintain",
                data: $("#form-maintain-add").serialize(),
                dataType: "json",
                success: function (result) {
                    if (result.flag == 1) {
                        layer.msg(result.flag + ":" + result.msg, {icon: 6});
                    } else {
                        layer.msg(result.flag + ":" + result.msg, {icon: 5});
                    }
                    closec();
                }
            });
        }
    }


</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>